/**
 * 按钮点击次数统计，类组件实现方案
 * 导入 React
 * 1 状态，count
 * 2 改变状态的方法 this.setState(), 按钮点击的时候调用
 * 3 显示点击次数
 *
 * 4 将点击次数显示到浏览器tab页标题栏上
 */
import React from "react";

class ClassCounter extends React.Component {
  constructor(props) {
    super(props);
    // 状态
    this.state = {
      count: 0,
    };
  }

  handleCount = () => {
    // 修改状态的方法
    this.setState({
      count: this.state.count + 1,
    });
  };

  render() {
    return (
      <button onClick={this.handleCount}>
        按钮被点击了{this.state.count}次
      </button>
    );
  }

  // 挂载阶段执行完毕
  componentDidMount() {
    document.title = `按钮被点击了${this.state.count}次`;
  }
  // 更新阶段
  componentDidUpdate() {
    document.title = `按钮被点击了${this.state.count}次`;
  }
}

export default ClassCounter;
